<script setup lang="ts">
import { Button } from "@purchasing/components"
import { h, ref } from "vue"

const router = useRouter()

const loading = ref(false)
const clickButton = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000);
}
</script>

<template>
  <div class="pc-flex pc-items-start">
    <div class="pc-grid pc-gap-y-1">
      <div>默认尺寸:md</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :icon="h('h-icon-export')" type="primary" @click="router.push('/rest-filter')">主按钮</Button></div>
        <div><Button type="primary">
          <template #icon>
            <h-icon-export />
          </template>
          slot
        </Button></div>
        <div><Button type="secondary">次按钮</Button></div>
        <div><Button>默认按钮</Button></div>
        <div><Button type="dashed">虚线按钮</Button></div>
        <div><Button type="text">文字按钮</Button></div>
        <div><Button type="link">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black pc-h-24">
        <div class=" pc-m-auto">幽灵按钮：<Button type="ghost" size="lg">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <div><Button :icon="h('h-icon-export')" type="primary" :danger="true">主按钮</Button></div>
      <div><Button type="primary" :danger="true">
        <template #icon>
          <h-icon-export />
        </template>
        slot
      </Button></div>
      <div><Button type="secondary" :danger="true" :icon="h('h-icon-export')">次按钮</Button></div>
      <div><Button :danger="true">默认按钮</Button></div>
      <div><Button type="dashed" :danger="true">虚线按钮</Button></div>
      <div><Button type="link" :danger="true">链接按钮</Button></div>

    </div>
    <div class="pc-grid pc-gap-y-1 pc-mx-3">
      <div>disabled:md</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :disabled="true" :icon="h('h-icon-export')" type="primary">主按钮</Button></div>
        <div><Button :disabled="true" type="primary">
          <template #icon><h-icon-export /></template>slot
        </Button></div>
        <div><Button type="secondary" :disabled="true">次按钮</Button></div>
        <div><Button :disabled="true">默认按钮</Button></div>
        <div><Button :disabled="true" type="dashed">虚线按钮</Button></div>
        <div><Button :disabled="true" type="text">文字按钮</Button></div>
        <div><Button :disabled="true" type="link">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black pc-h-24">
        <div class=" pc-m-auto" >幽灵按钮：<Button :disabled="true" type="ghost">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <div><Button :disabled="true" :icon="h('h-icon-export')" type="primary" :danger="true">主按钮</Button></div>
      <div><Button :disabled="true" type="primary" :danger="true">
        <template #icon><h-icon-export /></template>slot
      </Button></div>
      <div><Button type="secondary" :disabled="true" :danger="true">次按钮</Button></div>
      <div><Button :disabled="true" :danger="true">默认按钮</Button></div>
      <div><Button :disabled="true" type="dashed" :danger="true">虚线按钮</Button></div>
      <div><Button :disabled="true" type="link" :danger="true">链接按钮</Button></div>

    </div>
    <div class="pc-grid pc-gap-y-1">
      <div>尺寸:lg</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :icon="h('h-icon-bar')" type="primary" size="lg">主按钮</Button></div>
        <div><Button type="primary" size="lg">
          <template #icon>
            <h-icon-export />
          </template>
          slot
        </Button></div>
        <div><Button type="secondary" size="lg" :icon="h('h-icon-bar')">次按钮</Button></div>
        <div><Button size="lg" :icon="h('h-icon-bar')">默认按钮</Button></div>
        <div><Button type="dashed" size="lg" :icon="h('h-icon-bar')">虚线按钮</Button></div>
        <div><Button type="text" size="lg">文字按钮</Button></div>
        <div><Button type="link" size="lg" :icon="h('h-icon-bar')">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black">
        <div class=" pc-m-auto">幽灵按钮：<Button type="ghost" size="lg">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <!-- <div class="pc-flex">
        <div>主按钮：<Button></Button></div>
        <div>次按钮：<Button></Button></div>
        <div>默认按钮：<Button></Button></div>
        <div>虚线按钮：<Button></Button></div>
        <div>文字按钮：<Button></Button></div>
        <div>链接按钮：<Button></Button></div>
      </div> -->

    </div>
    <div class="pc-grid pc-gap-y-1">
      <div>尺寸:sm</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :icon="h('h-icon-export')" type="primary" size="sm">主按钮</Button></div>
        <div><Button type="primary" size="sm">
          <template #icon>
            <h-icon-export />
          </template>
          slot
        </Button></div>
        <div><Button type="secondary" size="sm">次按钮</Button></div>
        <div><Button size="sm">默认按钮</Button></div>
        <div><Button type="dashed" size="sm">虚线按钮</Button></div>
        <div><Button type="text" size="sm">文字按钮</Button></div>
        <div><Button type="link" size="sm">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black">
        <div class=" pc-m-auto">幽灵按钮：<Button type="ghost" size="sm">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <!-- <div class="pc-flex">
        <div>主按钮：<Button></Button></div>
        <div>次按钮：<Button></Button></div>
        <div>默认按钮：<Button></Button></div>
        <div>虚线按钮：<Button></Button></div>
        <div>文字按钮：<Button></Button></div>
        <div>链接按钮：<Button></Button></div>
      </div> -->

    </div>
    <div class="pc-grid pc-gap-y-1">
      <div>尺寸:xs</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :icon="h('h-icon-export')" type="primary" size="xs">主按钮</Button></div>
        <div><Button type="primary" size="xs">
          <template #icon>
            <h-icon-export />
          </template>
          slot
        </Button></div>
        <div><Button type="secondary" size="xs">次按钮</Button></div>
        <div><Button size="xs">默认按钮</Button></div>
        <div><Button type="dashed" size="xs">虚线按钮</Button></div>
        <div><Button type="text" size="xs">文字按钮</Button></div>
        <div><Button type="link" size="xs">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black">
        <div class=" pc-m-auto">幽灵按钮：<Button type="ghost" size="xs">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <!-- <div class="pc-flex">
        <div>主按钮：<Button></Button></div>
        <div>次按钮：<Button></Button></div>
        <div>默认按钮：<Button></Button></div>
        <div>虚线按钮：<Button></Button></div>
        <div>文字按钮：<Button></Button></div>
        <div>链接按钮：<Button></Button></div>
      </div> -->

    </div>
    <div class="pc-grid pc-gap-y-1">
      <div>loading:md</div>
      <div class="pc-grid pc-gap-y-1">
        <div><Button :icon="h('h-icon-export')" type="primary" :loading="loading" @click="clickButton">主按钮</Button></div>
        <div><Button type="primary" :loading="true">
          <template #icon>
            <h-icon-export />
          </template>
          slot
        </Button></div>
        <div><Button type="secondary" :loading="true">次按钮</Button></div>
        <div><Button :loading="true">默认按钮</Button></div>
        <div><Button type="dashed" :loading="true">虚线按钮</Button></div>
        <div><Button type="text">文字按钮</Button></div>
        <div><Button type="link">链接按钮</Button></div>
      </div>
      <div class="pc-flex pc-bg-black pc-h-24">
        <div class=" pc-m-auto">幽灵按钮：<Button type="ghost" size="lg" :loading="true">幽灵</Button></div>
      </div>
      <div>危险按钮</div>
      <div><Button :icon="h('h-icon-export')" type="primary" :danger="true" :loading="true">主按钮</Button></div>
      <div><Button type="primary" :danger="true" :loading="true">
        <template #icon>
          <h-icon-export />
        </template>
        slot
      </Button></div>
      <div><Button type="secondary" :danger="true" :icon="h('h-icon-export')" :loading="true">次按钮</Button></div>
      <div><Button :danger="true" :loading="true">默认按钮</Button></div>
      <div><Button type="dashed" :danger="true" :loading="true">虚线按钮</Button></div>
      <div><Button type="link" :danger="true">链接按钮</Button></div>
    </div>
  </div>
</template>
